<template>
  <div class="divBox">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-steps :active="currentTab" align-center finish-status="success">
          <el-step title="商品信息"/>
          <el-step title="商品详情"/>
          <el-step title="其他设置"/>
          <el-step title="规格设置"/>
        </el-steps>
      </div>
      <el-form ref="formValidate" v-loading="fullscreenLoading" class="formValidate mt20" :rules="ruleValidate"
               :model="formValidate" label-width="130px" @submit.native.prevent
      >
        <el-row v-show="currentTab === 0" :gutter="24">
          <!-- 商品信息-->
          <el-col v-bind="grid2">
            <el-form-item label="商品名称：" prop="store_name">
              <el-input v-model="formValidate.store_name" placeholder="请输入商品名称"/>
            </el-form-item>
          </el-col>
          <!--          <el-col v-bind="grid2">-->
          <!--            <el-form-item label="商户商品分类：" prop="mer_cate_id">-->
          <!--              <el-cascader v-model="formValidate.mer_cate_id" class="selWidth" :options="merCateList" :props="propsMer"-->
          <!--                           filterable clearable/>-->
          <!--            </el-form-item>-->
          <!--          </el-col>-->
          <el-col v-bind="grid2">
            <el-form-item label="平台商品分类：" prop="cate_id">
              <el-cascader v-model="formValidate.cate_id" class="selWidth" :options="categoryList" :props="props"
                           filterable clearable
              />
            </el-form-item>
          </el-col>
          <!--          <el-col v-bind="grid2">-->
          <!--            <el-form-item label="品牌选择：">-->
          <!--              <el-select v-model="formValidate.brand_id" filterable placeholder="请选择" class="selWidth">-->
          <!--                <el-option v-for="item in BrandList" :key="item.brand_id" :label="item.brand_name"-->
          <!--                           :value="item.brand_id"/>-->
          <!--              </el-select>-->
          <!--            </el-form-item>-->
          <!--          </el-col>-->
          <el-col v-bind="grid2">
            <el-form-item label="商品关键字：">
              <el-input v-model="formValidate.keyword" placeholder="请输入商品关键字"/>
            </el-form-item>
          </el-col>
          <el-col v-bind="grid2">
            <el-form-item label="单位：" prop="unit_name">
              <el-input v-model="formValidate.unit_name" placeholder="请输入单位"/>
            </el-form-item>
          </el-col>
          <!--          <el-col v-bind="grid2" v-if="formValidate.is_trader!=0">-->
          <!--            <el-form-item label="设置服务费：" prop="give_point_ratio">-->
          <!--              <div class="fuwu">-->
          <!--                <el-input v-model="formValidate.give_point_ratio" placeholder="请输入服务费"/>-->
          <!--                %-->
          <!--              </div>-->

          <!--            </el-form-item>-->
          <!--          </el-col>-->
          <el-col v-bind="grid2">
            <el-form-item label="商品简介：" prop="store_info">
              <el-input v-model="formValidate.store_info" type="textarea" :rows="3" placeholder="请输入商品简介"/>
            </el-form-item>
          </el-col>
          <el-col v-bind="grid2">
            <el-form-item label="商品封面图：" prop="image">
              <div class="upLoadPicBox" title="750*750px" @click="modalPicTap('1')">
                <div v-if="formValidate.image" class="pictrue">
                  <img :src="formValidate.image">
                </div>
                <div v-else class="upLoad">
                  <i class="el-icon-camera cameraIconfont"/>
                </div>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="商品轮播图：" prop="slider_image">
              <div class="acea-row">
                <div v-for="(item,index) in formValidate.slider_image" :key="index" class="pictrue" draggable="false"
                     @dragstart="handleDragStart($event, item)" @dragover.prevent="handleDragOver($event, item)"
                     @dragenter="handleDragEnter($event, item)" @dragend="handleDragEnd($event, item)"
                >
                  <img :src="item">
                  <i class="el-icon-error btndel" @click="handleRemove(index)"/>
                </div>
                <div v-if="formValidate.slider_image.length < 10" class="uploadCont" title="750*750px">
                  <div class="upLoadPicBox" @click="modalPicTap('2')">
                    <div class="upLoad">
                      <i class="el-icon-camera cameraIconfont"/>
                    </div>
                  </div>
                </div>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="主图视频：" prop="video_link">
              <el-input v-model="videoLink" class="perW50" placeholder="请输入视频链接"/>
              <input ref="refid" type="file" style="display:none" @change="zh_uploadFile_change">
              <el-button type="primary" icon="ios-cloud-upload-outline" class="uploadVideo" @click="zh_uploadFile">
                {{ videoLink ? '确认添加' : '上传视频' }}
              </el-button>
              <!--              <Progress :percent = progress :stroke-width="5" v-if="upload.videoIng" />-->
              <el-progress v-if="upload.videoIng" :percentage="progress" :text-inside="true" :stroke-width="26"/>
              <div v-if="formValidate.video_link" class="iview-video-style">
                <video style="width:100%;height: 100%!important;border-radius: 10px;" :src="formValidate.video_link"
                       controls="controls"
                >您的浏览器不支持 video 标签。
                </video>
                <div class="mark"/>
                <i class="el-icon-delete iconv" @click="delVideo"/>
              </div>
            </el-form-item>
          </el-col>
          <el-col v-if="deliveryType.length == 2" :span="24">
            <el-form-item label="送货方式：" prop="delivery_way">
              <div class="acea-row">
                <el-checkbox-group v-model="formValidate.delivery_way">
                  <el-checkbox v-for="item in deliveryList" :key="item.value" :label="item.value">
                    {{ item.name }}
                  </el-checkbox>
                </el-checkbox-group>
              </div>
            </el-form-item>
          </el-col>
          <el-col
            v-if="formValidate.delivery_way.length == 2 || (formValidate.delivery_way.length == 1 && formValidate.delivery_way[0] == 2)"
            :span="10"
          >
            <el-form-item label="是否包邮：">
              <el-radio-group v-model="formValidate.delivery_free">
                <el-radio :label="0" class="radio">否</el-radio>
                <el-radio :label="1">是</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col
            v-if="formValidate.mer_id == 1 "
            :span="10"
          >
            <el-form-item label="是否设为创客礼包：">
              <el-radio-group v-model="formValidate.is_maker_gift">
                <el-radio :label="0" class="radio">否</el-radio>
                <el-radio :label="1">是</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col
            v-if="is_open_red_packet===1"
            :span="10"
          >
            <el-form-item label="是否购物券支付：">
              <el-radio-group v-model="formValidate.is_red_packet_pay">
                <el-radio :label="0" class="radio">否</el-radio>
                <el-radio :label="1">是</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col

            :span="24"
          >
            <el-form-item label="选择活动区：" v-if="formValidate.mer_id==1">
              <el-radio-group v-model="formValidate.extend_cate_id">
                <el-select
                  @change="pickDepartment2"
                  v-model="form.name"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in optionsNews"
                    :key="item.status"
                    :label="item.name"
                    :value="item.status"
                  >
                  </el-option>
                </el-select>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="选择活动区：" v-else>
              <el-radio-group v-model="formValidate.extend_cate_id">
                <el-select
                  @change="pickDepartment2"
                  v-model="form.name"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in options"
                    :key="item.status"
                    :label="item.name"
                    :value="item.status"
                  >
                  </el-option>
                </el-select>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <div v-if="showRedBag">
            <el-col :span="10">
              <el-form-item label="可抵扣金币数量：" prop="deduct_gold_coin" v-if="formValidate.extend_cate_id==1">
                <el-input v-model="formValidate.deduct_gold_coin" placeholder="请输入数量" type="number"/>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="赠送分红券数量：" prop="give_bonus_point">
                <div style="display: flex">
                  <el-input v-model="formValidate.give_bonus_point" type="number" disabled/>
                </div>

              </el-form-item>
            </el-col>
          </div>
          <el-col
            v-if="formValidate.delivery_free == 0 && ((formValidate.delivery_way.length == 2) || (formValidate.delivery_way.length == 1 && formValidate.delivery_way[0] == 2))"
            :span="24"
          >
            <el-form-item label="运费模板：" prop="temp_id">
              <div class="acea-row">
                <el-select v-model="formValidate.temp_id" placeholder="请选择" class="selWidthd mr20">
                  <el-option v-for="item in shippingList" :key="item.shipping_template_id" :label="item.name"
                             :value="item.shipping_template_id"
                  />
                </el-select>
                <el-button class="mr15" size="small" @click="addTem">添加运费模板</el-button>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="优惠券：" class="proCoupon">
              <div class="acea-row">
                <el-tag v-for="(tag, index) in formValidate.couponData" :key="index" class="mr10" closable
                        :disable-transitions="false" @close="handleCloseCoupon(tag)"
                >{{ tag.title }}
                </el-tag>
                <el-button class="mr15" size="mini" @click="addCoupon">选择优惠券</el-button>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 商品详情-->
        <el-row v-show="currentTab === 1">
          <el-col :span="24">
            <el-form-item label="商品详情：">
              <vue-ueditor-wrap v-model="formValidate.content" :config="myConfig" @beforeInit="addCustomDialog"/>
              <!--              <ueditorFrom v-model="formValidate.content" :content="formValidate.content"/>-->
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 其他设置-->
        <el-row v-show="currentTab === 2">
          <el-col :span="24">
            <el-col v-bind="grid">
              <el-form-item label="单次最多购买件数：">
                <el-input-number v-model="formValidate.once_count" placeholder="请输入购买件数"/> &nbsp;&nbsp;默认为0，则不限制购买件数
              </el-form-item>
            </el-col>
          </el-col>
          <el-col :span="24">
            <el-col v-bind="grid">
              <el-form-item label="排序：">
                <el-input-number v-model="formValidate.sort" placeholder="请输入排序"/>
              </el-form-item>
            </el-col>
          </el-col>
          <el-col :span="24">
            <el-form-item label="商品推荐：">
              <el-checkbox-group v-model="checkboxGroup" size="small" @change="onChangeGroup">
                <el-checkbox v-for="(item, index) in recommend" :key="index" :label="item.value">{{
                    item.name
                  }}
                </el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-col>
          <el-col v-if="labelList.length" :span="24">
            <el-form-item label="商品标签：">
              <el-select v-model="formValidate.mer_labels" multiple placeholder="请选择" class="selWidthd">
                <el-option
                  v-for="item in labelList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="平台保障服务：">
              <div class="acea-row">
                <el-select v-model="formValidate.guarantee_template_id" placeholder="请选择" clearable
                           class="selWidthd mr20"
                >
                  <el-option v-for="item in guaranteeList" :key="item.guarantee_template_id" :label="item.template_name"
                             :value="item.guarantee_template_id"
                  />
                </el-select>
                <el-button class="mr15" size="small" @click="addServiceTem">添加服务说明模板</el-button>
              </div>
            </el-form-item>
          </el-col>
          <!--          <el-col :span="24">-->
          <!--            <el-form-item label="是否开启礼包：">-->
          <!--              <el-radio-group v-model="formValidate.is_gift_bag" :disabled="$route.params.id ? true : false">-->
          <!--                <el-radio :label="0" class="radio">否</el-radio>-->
          <!--                <el-radio :label="1">是</el-radio>-->
          <!--              </el-radio-group>-->
          <!--            </el-form-item>-->
          <!--          </el-col>-->
        </el-row>
        <el-row v-show="currentTab === 3">
          <el-col :span="24">
            <el-form-item v-if="extensionStatus>0" label="佣金设置：" props="extension_type">
              <el-radio-group v-model="formValidate.extension_type" @change="onChangetype(formValidate.extension_type)">
                <el-radio :label="1" class="radio">单独设置</el-radio>
                <el-radio :label="0">默认设置</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item v-if="deductionStatus>0" label="积分抵扣比例：">
              <el-radio-group v-model="deduction_set" @change="changeIntergral(deduction_set)">
                <el-radio :label="1" class="radio">单独设置</el-radio>
                <el-radio :label="-1">默认设置</el-radio>
              </el-radio-group>
              <div v-if="deduction_set == 1">
                <el-input-number v-model="formValidate.integral_rate" :min="0" placeholder="请输入抵扣比例"/>
                %
              </div>
            </el-form-item>
            <el-form-item label="商品规格：" props="spec_type">
              <el-radio-group v-model="formValidate.spec_type" @change="onChangeSpec(formValidate.spec_type)">
                <el-radio :label="0" class="radio">单规格</el-radio>
                <el-radio :label="1">多规格</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <!-- 多规格添加-->
          <el-col v-if="formValidate.spec_type === 1" :span="24" class="noForm">
            <el-form-item label="选择规格：">
              <div class="acea-row">
                <el-select v-model="selectRule">
                  <el-option v-for="item in ruleList" :key="item.attr_template_id" :label="item.template_name"
                             :value="item.attr_template_id"
                  />
                </el-select>
                <el-button type="primary" class="mr20" @click="confirm">确认</el-button>
                <el-button class="mr15" @click="addRule">添加规格模板</el-button>
              </div>
            </el-form-item>
            <el-form-item v-if="formValidate.attr.length > 0">
              <div v-for="(item, index) in formValidate.attr" :key="index">
                <div class="acea-row row-middle">
                  <span class="mr5">{{ item.value }}</span>
                  <i class="el-icon-circle-close" @click="handleRemoveAttr(index)"/>
                </div>
                <div class="rulesBox">
                  <el-tag v-for="(j, indexn) in item.detail" :key="indexn" closable size="medium"
                          :disable-transitions="false" class="mb5 mr10" @close="handleClose(item.detail,indexn)"
                  >{{ j }}
                  </el-tag>
                  <el-input v-if="item.inputVisible" ref="saveTagInput" v-model="item.detail.attrsVal"
                            class="input-new-tag" size="small"
                            @keyup.enter.native="createAttr(item.detail.attrsVal,index)"
                            @blur="createAttr(item.detail.attrsVal,index)"
                  />
                  <el-button v-else class="button-new-tag" size="small" @click="showInput(item)">+ 添加</el-button>
                </div>
              </div>
            </el-form-item>
            <el-col v-if="isBtn">
              <el-col :xl="6" :lg="9" :md="9" :sm="24" :xs="24">
                <el-form-item label="规格：">
                  <el-input v-model="formDynamic.attrsName" placeholder="请输入规格"/>
                </el-form-item>
              </el-col>
              <el-col :xl="6" :lg="9" :md="9" :sm="24" :xs="24">
                <el-form-item label="规格值：">
                  <el-input v-model="formDynamic.attrsVal" placeholder="请输入规格值"/>
                </el-form-item>
              </el-col>
              <el-col :xl="12" :lg="6" :md="6" :sm="24" :xs="24">
                <el-form-item class="noLeft">
                  <el-button type="primary" class="mr15" @click="createAttrName">确定</el-button>
                  <el-button @click="offAttrName">取消</el-button>
                </el-form-item>
              </el-col>
            </el-col>
            <el-form-item v-if="!isBtn">
              <el-button type="primary" icon="md-add" class="mr15" @click="addBtn">添加新规格</el-button>
            </el-form-item>
          </el-col>
          <!-- 批量设置-->
          <el-col v-if="formValidate.spec_type === 1 && formValidate.attr.length>0" :span="24" class="noForm">
            <el-form-item label="批量设置：" class="labeltop">
              <el-table :data="oneFormBatch" border class="tabNumWidth" size="mini">
                <el-table-column align="center" label="图片" min-width="80">
                  <template slot-scope="scope">
                    <div class="upLoadPicBox" title="750*750px" @click="modalPicTap('1','pi')">
                      <div v-if="scope.row.image" class="pictrue tabPic">
                        <img :src="scope.row.image">
                      </div>
                      <div v-else class="upLoad tabPic">
                        <i class="el-icon-camera cameraIconfont"/>
                      </div>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column v-for="(item,iii) in attrValue" :key="iii" :label="formThead[iii].title" align="center"
                                 min-width="120"
                >
                  <template slot-scope="scope">
                    <el-input v-model="scope.row[iii]" :type="formThead[iii].title==='商品编号'?'text':'number'"
                              :min="0" class="priceBox"
                    />
                  </template>
                </el-table-column>
                <template v-if="formValidate.extension_type === 1">
                  <el-table-column align="center" label="一级返佣(元)" min-width="120">
                    <template slot-scope="scope">
                      <el-input v-model="scope.row.extension_one" type="number" :min="0" class="priceBox"/>
                    </template>
                  </el-table-column>
                  <el-table-column align="center" label="二级返佣(元)" min-width="120">
                    <template slot-scope="scope">
                      <el-input v-model="scope.row.extension_two" type="number" :min="0" class="priceBox"/>
                    </template>
                  </el-table-column>
                </template>
                <el-table-column align="center" label="操作" min-width="80">
                  <template>
                    <el-button type="text" class="submission" @click="batchAdd">批量添加</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-form-item>
          </el-col>
          <el-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24">
            <!-- 单规格表格-->
            <el-form-item v-if="formValidate.spec_type === 0">
              <el-table :data="OneattrValue" border class="tabNumWidth" size="mini">
                <el-table-column align="center" label="图片" min-width="80">
                  <template slot-scope="scope">
                    <div class="upLoadPicBox" @click="modalPicTap('1', 'dan', 'pi')">
                      <div v-if="formValidate.image" class="pictrue tabPic">
                        <img :src="scope.row.image">
                      </div>
                      <div v-else class="upLoad tabPic">
                        <i class="el-icon-camera cameraIconfont"/>
                      </div>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column v-for="(item,iii) in attrValue" :key="iii" :label="formThead[iii].title" align="center"
                                 min-width="120"
                >
                  <template slot-scope="scope">
                    <el-input v-model="scope.row[iii]" :type="formThead[iii].title==='商品编号'?'text':'number'"
                              :min="0" class="priceBox"
                    />
                  </template>
                </el-table-column>
                <template v-if="formValidate.extension_type === 1">
                  <el-table-column align="center" label="一级返佣(元)" min-width="120">
                    <template slot-scope="scope">
                      <el-input v-model="scope.row.extension_one" type="number" :min="0" class="priceBox"/>
                    </template>
                  </el-table-column>
                  <el-table-column align="center" label="二级返佣(元)" min-width="120">
                    <template slot-scope="scope">
                      <el-input v-model="scope.row.extension_two" type="number" :min="0" class="priceBox"/>
                    </template>
                  </el-table-column>
                </template>
              </el-table>
            </el-form-item>
            <!-- 多规格表格-->
            <el-form-item v-if="formValidate.spec_type === 1 && formValidate.attr.length>0" class="labeltop"
                          label="规格列表："
            >
              <el-table :data="ManyAttrValue" border class="tabNumWidth" size="mini">
                <template v-if="manyTabDate">
                  <el-table-column v-for="(item,iii) in manyTabDate" :key="iii" align="center"
                                   :label="manyTabTit[iii].title" min-width="80"
                  >
                    <template slot-scope="scope">
                      <span class="priceBox" v-text="scope.row[iii]"/>
                    </template>
                  </el-table-column>
                </template>
                <el-table-column align="center" label="图片" min-width="80">
                  <template slot-scope="scope">
                    <div class="upLoadPicBox" title="750*750px" @click="modalPicTap('1','duo',scope.$index)">
                      <div v-if="scope.row.image" class="pictrue tabPic">
                        <img :src="scope.row.image">
                      </div>
                      <div v-else class="upLoad tabPic">
                        <i class="el-icon-camera cameraIconfont"/>
                      </div>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column v-for="(item,iii) in attrValue" :key="iii" :label="formThead[iii].title" align="center"
                                 min-width="120"
                >
                  <template slot-scope="scope">
                    <el-input v-model="scope.row[iii]" :type="formThead[iii].title==='商品编号'?'text':'number'"
                              class="priceBox"
                    />
                  </template>
                </el-table-column>
                <template v-if="formValidate.extension_type === 1">
                  <el-table-column key="1" align="center" label="一级返佣(元)" min-width="120">
                    <template slot-scope="scope">
                      <el-input v-model="scope.row.extension_one" type="number" :min="0" class="priceBox"/>
                    </template>
                  </el-table-column>
                  <el-table-column key="2" align="center" label="二级返佣(元)" min-width="120">
                    <template slot-scope="scope">
                      <el-input v-model="scope.row.extension_two" type="number" :min="0" class="priceBox"/>
                    </template>
                  </el-table-column>
                </template>
                <el-table-column key="3" align="center" label="操作" min-width="80">
                  <template slot-scope="scope">
                    <el-button type="text" class="submission" @click="delAttrTable(scope.$index)">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item style="margin-top:30px;">
          <el-button v-show="currentTab>0" type="primary" class="submission" size="small" @click="handleSubmitUp">
            上一步
          </el-button>
          <el-button v-show="currentTab<3" type="primary" class="submission" size="small"
                     @click="handleSubmitNest('formValidate')"
          >下一步
          </el-button>
          <el-button v-show="currentTab===3 || $route.params.id" :loading="loading" type="primary" class="submission"
                     size="small" @click="handleSubmit('formValidate')"
          >提交
          </el-button>
          <el-button v-show="currentTab===3" :loading="loading" type="primary" class="submission" size="small"
                     @click="handlePreview('formValidate')"
          >预览
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <!--添加服务保障模板-->
    <guarantee-service ref="serviceGuarantee" @get-list="getGuaranteeList"/>
    <!--预览商品-->
    <div v-if="previewVisible">
      <div class="bg" @click.stop="previewVisible = false"/>
      <preview-box v-if="previewVisible" ref="previewBox" :preview-key="previewKey"/>
    </div>
  </div>
</template>

<script>
// +----------------------------------------------------------------------
// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
// +----------------------------------------------------------------------
// | Copyright (c) 2016~2021 https://www.crmeb.com All rights reserved.
// +----------------------------------------------------------------------
// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
// +----------------------------------------------------------------------
// | Author: CRMEB Team <admin@crmeb.com>
// +----------------------------------------------------------------------
import ueditorFrom from '@/components/ueditorFrom'
import VueUeditorWrap from 'vue-ueditor-wrap'
import {
  shippingListApi,
  templateLsitApi,
  productCreateApi,
  productDetailApi,
  categorySelectApi,
  categoryListApi,
  categoryBrandListApi,
  productUpdateApi,
  productConfigApi,
  productGetTempKeysApi,
  guaranteeListApi,
  productPreviewApi,
  getProductLabelApi

} from '@/api/product'
import {
  getBaseInfo

} from '@/api/user'
import { roterPre } from '@/settings'
import guaranteeService from '@/components/serviceGuarantee/index'
import previewBox from '@/components/previewBox/index'

const defaultObj = {
  image: '',
  slider_image: [],
  store_name: '',
  store_info: '',
  give_point_ratio: 20,
  is_trader: -1,
  mer_id: 0,//商户id
  keyword: '',
  brand_id: '', // 品牌id
  cate_id: '', // 平台分类id
  mer_cate_id: [], // 商户分类id
  unit_name: '',
  sort: 0,
  once_count: 0,
  is_good: 0,
  temp_id: '',
  video_link: '',
  guarantee_template_id: '',
  delivery_way: [],
  mer_labels: [],
  delivery_free: 0,
  is_maker_gift: 0,
  is_red_packet_pay: 0,
  attrValue: [
    {
      image: '',
      price: null,
      cost: null,
      ot_price: null,
      stock: null,
      bar_code: '',
      weight: null,
      volume: null
    }
  ],
  attr: [],
  extension_type: 0,
  integral_rate: -1,
  content: '',
  spec_type: 0,
  give_coupon_ids: [],
  is_gift_bag: 0,
  couponData: [],
  extend_cate_id: 0,
  give_red_packet: 20,
  give_bonus_point: '',
  deduct_gold_coin: 0
}
const objTitle = {
  price: {
    title: '售价'
  },
  cost: {
    title: '成本价'
  },
  ot_price: {
    title: '原价'
  },
  stock: {
    title: '库存'
  },
  bar_code: {
    title: '商品编号'
  },
  weight: {
    title: '重量（KG）'
  },
  volume: {
    title: '体积(m³)'
  }
}
const proOptions = [{ name: '店铺推荐', value: 'is_good' }]
export default {
  name: 'ProductProductAdd',
  components: { ueditorFrom, VueUeditorWrap, guaranteeService, previewBox },
  data() {
    return {
      is_open_red_packet:0,
      form: {
        id: '',
        status: '',
        fail_msg: '',
        name: ''
      },
      optionsNews: [
        {
          status: 0,
          name: '赠送20%分红券'
        },
        {
          status: 1,
          name: '分红券区'
        }
        , {
          status: 2,
          name: '新人体验区'
        }
        , {
          status: 3,
          name: '旅游区'
        }
      ],
      options: [
        {
          status: 0,
          name: '赠送20%分红券'
        },
        {
          status: 1,
          name: '分红券区'
        }

      ],
      myConfig: {
        autoHeightEnabled: false, // 编辑器不自动被内容撑高
        initialFrameHeight: 500, // 初始容器高度
        initialFrameWidth: '100%', // 初始容器宽度
        UEDITOR_HOME_URL: '/UEditor/',
        serverUrl: ''
      },
      optionsCate: {
        value: 'store_category_id',
        label: 'cate_name',
        children: 'children',
        emitPath: false
      },
      showRedBag: false,
      roterPre: roterPre,
      selectRule: '',
      checkboxGroup: [],
      recommend: proOptions,
      tabs: [],
      fullscreenLoading: false,
      props: { emitPath: false },
      propsMer: { emitPath: false, multiple: true },
      active: 0,
      deduction_set: -1,
      OneattrValue: [Object.assign({}, defaultObj.attrValue[0])], // 单规格
      ManyAttrValue: [Object.assign({}, defaultObj.attrValue[0])], // 多规格
      ruleList: [],
      merCateList: [], // 商户分类筛选
      categoryList: [], // 平台分类筛选
      shippingList: [], // 运费模板
      guaranteeList: [], // 服务保障模板
      BrandList: [], // 品牌
      deliveryList: [],
      labelList: [], // 商品标签
      formThead: Object.assign({}, objTitle),
      formValidate: Object.assign({}, defaultObj),
      picValidate: true,
      formDynamics: {
        template_name: '',
        template_value: []
      },
      manyTabTit: {},
      manyTabDate: {},
      grid2: {
        xl: 10,
        lg: 12,
        md: 12,
        sm: 24,
        xs: 24
      },
      // 规格数据
      formDynamic: {
        attrsName: '',
        attrsVal: ''
      },
      isBtn: false,
      manyFormValidate: [],
      images: [],
      currentTab: 0,
      isChoice: '',
      upload: {
        videoIng: false // 是否显示进度条；
      },
      progress: 10, // 进度条默认0
      videoLink: '',
      grid: {
        xl: 8,
        lg: 8,
        md: 12,
        sm: 24,
        xs: 24
      },
      loading: false,
      ruleValidate: {
        give_coupon_ids: [{ required: true, message: '请选择优惠券', trigger: 'change', type: 'array' }],
        store_name: [{ required: true, message: '请输入商品名称', trigger: 'blur' }],
        mer_cate_id: [{ required: true, message: '请选择商户分类', trigger: 'change', type: 'array', min: '1' }],
        cate_id: [{ required: true, message: '请选择平台分类', trigger: 'change' }],
        keyword: [{ required: true, message: '请输入商品关键字', trigger: 'blur' }],
        unit_name: [{ required: true, message: '请输入单位', trigger: 'blur' }],
        store_info: [{ required: true, message: '请输入商品简介', trigger: 'blur' }],
        temp_id: [{ required: true, message: '请选择运费模板', trigger: 'change' }],
        // brand_id: [{ required: true, message: '请选择品牌', trigger: 'change' }],
        image: [{ required: true, message: '请上传商品图', trigger: 'change' }],
        slider_image: [{ required: true, message: '请上传商品轮播图', type: 'array', trigger: 'change' }],
        spec_type: [{ required: true, message: '请选择商品规格', trigger: 'change' }],
        delivery_way: [{ required: true, message: '请选择送货方式', trigger: 'change' }]
        // give_point_ratio: [{required: true, message: '请输入服务费', trigger: 'change'}]

      },
      attrInfo: {},
      keyNum: 0,
      extensionStatus: 0,
      deductionStatus: 0,
      previewVisible: false,
      previewKey: '',
      deliveryType: []
    }
  },
  computed: {
    attrValue() {
      const obj = Object.assign({}, defaultObj.attrValue[0])
      delete obj.image
      return obj
    },
    oneFormBatch() {
      const obj = [Object.assign({}, defaultObj.attrValue[0])]
      delete obj[0].bar_code
      return obj
    }
  },
  watch: {
    'formValidate.attr': {
      handler: function(val) {
        if (this.formValidate.spec_type === 1) this.watCh(val)
      },
      immediate: false,
      deep: true
    }
  },
  created() {
    console.log(this.$route)
    this.tempRoute = Object.assign({}, this.$route)
    if (this.$route.params.id && this.formValidate.spec_type === 1) {
      this.$watch('formValidate.attr', this.watCh)
    }
  },
  mounted() {
    this.formValidate.slider_image = []
    if (this.$route.params.id) {
      this.setTagsViewTitle()
      this.getInfo()
    } else {
      if (this.deduction_set == -1) this.formValidate.integral_rate = -1
    }
    this.formValidate.attr.map(item => {
      this.$set(item, 'inputVisible', false)
    })

    this.getBaseInfos()
    this.getCategoryList()
    this.getBrandListApi()
    this.getShippingList()
    this.getGuaranteeList()
    this.productCon()
    this.productGetRule()
    this.getLabelLst()
    this.getCategorySelect()
    this.$store.dispatch('settings/setEdit', true)
  },
  destroyed() {
    window.removeEventListener('popstate', this.goBack, false)
  },
  methods: {

    pickDepartment2(val) {
      console.log(val)
      this.formValidate.extend_cate_id = val
      //红包券区
      if (val != 0) {
        this.showRedBag = true
      } else {
        this.showRedBag = false
      }

    },
    goBack() {
      // console.log("点击了浏览器的返回按钮");
      sessionStorage.clear()
      window.history.back()
    },
    handleCloseCoupon(tag) {
      this.formValidate.couponData.splice(this.formValidate.couponData.indexOf(tag), 1)
      this.formValidate.give_coupon_ids = []
      this.formValidate.couponData.map(item => {
        this.formValidate.give_coupon_ids.push(item.coupon_id)
      })
    },
    productCon() {
      productConfigApi()
        .then(res => {
          this.extensionStatus = res.data.extension_status
          this.deductionStatus = res.data.integral_status
          this.deliveryType = res.data.delivery_way.map(String)
          if (!this.$route.params.id) this.formValidate.delivery_way = this.deliveryType
          if (this.deliveryType.length == 2) {
            this.deliveryList = [
              { value: '1', name: '到店自提' },
              { value: '2', name: '快递配送' }
            ]
          } else {
            if (this.deliveryType.length == 1 && this.deliveryType[0] == '1') {
              this.deliveryList = [
                { value: '1', name: '到店自提' }
              ]
            } else {
              this.deliveryList = [
                { value: '2', name: '快递配送' }
              ]
            }
          }
        })
        .catch(res => {
          this.$message.error(res.message)
        })
    },
    // 获取标签项
    getLabelLst() {
      getProductLabelApi().then(res => {
        this.labelList = res.data
      })
        .catch(res => {
          this.$message.error(res.message)
        })
    },
    addCoupon() {
      const _this = this
      this.$modalCoupon(
        this.formValidate.couponData,
        'wu',
        _this.formValidate.give_coupon_ids,
        (this.keyNum += 1),
        function(row) {
          _this.formValidate.give_coupon_ids = []
          _this.formValidate.couponData = row
          row.map(item => {
            _this.formValidate.give_coupon_ids.push(item.coupon_id)
          })
        }
      )
    },
    setTagsViewTitle() {
      const title = '编辑商品'
      const route = Object.assign({}, this.tempRoute, {
        title: `${title}-${this.$route.params.id}`
      })
      this.$store.dispatch('tagsView/updateVisitedView', route)
    },
    onChangeGroup() {
      this.checkboxGroup.includes('is_good')
        ? (this.formValidate.is_good = 1)
        : (this.formValidate.is_good = 0)
    },
    watCh(val) {
      const tmp = {}
      const tmpTab = {}
      this.formValidate.attr.forEach((o, i) => {
        tmp['value' + i] = { title: o.value }
        tmpTab['value' + i] = ''
      })
      console.log(this.ManyAttrValue)
      this.ManyAttrValue = this.attrFormat(val)
      this.ManyAttrValue.forEach((val, index) => {
        const key = Object.values(val.detail)
          .sort()
          .join('/')
        if (this.attrInfo[key]) this.ManyAttrValue[index] = this.attrInfo[key]
      })
      this.attrInfo = {}
      this.ManyAttrValue.forEach(val => {
        // this.attrInfo[Object.values(val.detail).sort().join('/')] = val
        if (val.detail !== 'undefined' && val.detail !== null) {
          this.attrInfo[
            Object.values(val.detail)
              .sort()
              .join('/')
            ] = val
        }
      })
      this.manyTabTit = tmp
      this.manyTabDate = tmpTab
      this.formThead = Object.assign({}, this.formThead, tmp)
      console.log(this.ManyAttrValue)
    },
    attrFormat(arr) {
      let data = []
      const res = []
      return format(arr)

      function format(arr) {
        if (arr.length > 1) {
          arr.forEach((v, i) => {
            if (i === 0) data = arr[i]['detail']
            const tmp = []
            data.forEach(function(vv) {
              arr[i + 1] &&
              arr[i + 1]['detail'] &&
              arr[i + 1]['detail'].forEach(g => {
                const rep2 =
                  (i !== 0 ? '' : arr[i]['value'] + '_$_') +
                  vv +
                  '-$-' +
                  arr[i + 1]['value'] +
                  '_$_' +
                  g
                tmp.push(rep2)
                if (i === arr.length - 2) {
                  const rep4 = {
                    image: '',
                    price: 0,
                    cost: 0,
                    ot_price: 0,
                    stock: 0,
                    bar_code: '',
                    weight: 0,
                    volume: 0,
                    brokerage: 0,
                    brokerage_two: 0
                  }
                  rep2.split('-$-').forEach((h, k) => {
                    const rep3 = h.split('_$_')
                    if (!rep4['detail']) rep4['detail'] = {}
                    rep4['detail'][rep3[0]] = rep3.length > 1 ? rep3[1] : ''
                  })
                  // if(rep4.detail !== 'undefined' && rep4.detail !== null){
                  Object.values(rep4.detail).forEach((v, i) => {
                    rep4['value' + i] = v
                  })
                  // }

                  res.push(rep4)
                }
              })
            })
            data = tmp.length ? tmp : []
          })
        } else {
          const dataArr = []
          arr.forEach((v, k) => {
            v['detail'].forEach((vv, kk) => {
              dataArr[kk] = v['value'] + '_' + vv
              res[kk] = {
                image: '',
                price: 0,
                cost: 0,
                ot_price: 0,
                stock: 0,
                bar_code: '',
                weight: 0,
                volume: 0,
                brokerage: 0,
                brokerage_two: 0,
                detail: { [v['value']]: vv }
              }
              // if(res[kk].detail !== 'undefined' && res[kk].detail !== null){
              Object.values(res[kk].detail).forEach((v, i) => {
                res[kk]['value' + i] = v
              })
              // }
            })
          })
          data.push(dataArr.join('$&'))
        }
        return res
      }
    },
    // 运费模板
    addTem() {
      const _this = this
      this.$modalTemplates(0, function() {
        _this.getShippingList()
      })
    },
    // 添加服务保障模板
    addServiceTem() {
      this.$refs.serviceGuarantee.add()
    },
    // 删除视频；
    delVideo() {
      const that = this
      that.$set(that.formValidate, 'video_link', '')
    },
    zh_uploadFile() {
      if (this.videoLink) {
        this.formValidate.video_link = this.videoLink
      } else {
        this.$refs.refid.click()
      }
    },
    zh_uploadFile_change(evfile) {
      console.log(evfile)
      const that = this
      that.progress = 10
      const suffix = evfile.target.files[0].name.substr(evfile.target.files[0].name.indexOf('.'))
      if (suffix !== '.mp4') {
        return that.$message.error('只能上传MP4文件')
      }
      productGetTempKeysApi().then(res => {
        that.$videoCloud.videoUpload({
          type: res.data.type,
          evfile: evfile,
          res: res,
          uploading(status, progress) {
            that.upload.videoIng = status
          }
        }).then(res => {
          that.formValidate.video_link = res.url || res.data.src
          that.$message.success('视频上传成功')
          that.progress = 100
        }).catch(res => {
          that.upload.videoIng = false
          that.$message.error(res)
        })
      })
    },
    // 添加规则；
    addRule() {
      const _this = this
      this.$modalAttr(this.formDynamics, function() {
        _this.productGetRule()
      })
    },
    // 选择规格
    onChangeSpec(num) {
      if (num === 1) this.productGetRule()
    },
    // 切换积分抵扣
    changeIntergral(e) {
      if (e == -1) {
        this.formValidate.integral_rate = -1
      } else {
        this.formValidate.integral_rate = this.formValidate.integral_rate
      }
    },
    // 选择属性确认
    confirm() {
      if (!this.selectRule) {
        return this.$message.warning('请选择属性')
      }
      this.ruleList.forEach(item => {
        if (item.attr_template_id === this.selectRule) {
          this.formValidate.attr = item.template_value
        }
      })
    },
    //基础信息
    getBaseInfos() {
      getBaseInfo()
        .then(res => {
          this.formValidate.is_trader = res.data.is_trader
          this.formValidate.mer_id = res.data.mer_id
          this.is_open_red_packet = res.data.is_open_red_packet
          console.log(this.formValidate.is_trader)
        })
        .catch(res => {
          this.$message.error(res.message)
        })
    },
    // 商户分类；
    getCategorySelect() {
      categorySelectApi()
        .then(res => {
          this.merCateList = res.data
          console.log(this.merCateLis)
        })
        .catch(res => {
          this.$message.error(res.message)
        })
    },
    // 平台分类；
    getCategoryList() {
      categoryListApi()
        .then(res => {
          this.categoryList = res.data
        })
        .catch(res => {
          this.$message.error(res.message)
        })
    },
    // 品牌筛选；
    getBrandListApi() {
      categoryBrandListApi()
        .then(res => {
          this.BrandList = res.data
        })
        .catch(res => {
          this.$message.error(res.message)
        })
    },
    // 获取商品属性模板；
    productGetRule() {
      templateLsitApi().then(res => {
        this.ruleList = res.data
      })
    },
    // 运费模板；
    getShippingList() {
      shippingListApi().then(res => {
        this.shippingList = res.data
      })
    },
    // 获取服务保障模板
    getGuaranteeList() {
      guaranteeListApi().then(res => {
        this.guaranteeList = res.data
      })
    },
    showInput(item) {
      this.$set(item, 'inputVisible', true)
    },
    onChangetype(item) {
      if (item === 1) {
        this.OneattrValue.map(item => {
          this.$set(item, 'extension_one', null)
          this.$set(item, 'extension_two', null)
        })
        this.ManyAttrValue.map(item => {
          this.$set(item, 'extension_one', null)
          this.$set(item, 'extension_two', null)
        })
      } else {
        this.OneattrValue.map(item => {
          delete item.extension_one
          delete item.extension_two
          this.$set(item, 'extension_one', null)
          this.$set(item, 'extension_two', null)
        })
        this.ManyAttrValue.map(item => {
          delete item.extension_one
          delete item.extension_two
        })
      }
    },
    // 删除表格中的属性
    delAttrTable(index) {
      this.ManyAttrValue.splice(index, 1)
    },
    // 批量添加
    batchAdd() {
      for (const val of this.ManyAttrValue) {
        this.$set(val, 'image', this.oneFormBatch[0].image)
        this.$set(val, 'price', this.oneFormBatch[0].price)
        this.$set(val, 'cost', this.oneFormBatch[0].cost)
        this.$set(val, 'ot_price', this.oneFormBatch[0].ot_price)
        this.$set(val, 'stock', this.oneFormBatch[0].stock)
        this.$set(val, 'bar_code', this.oneFormBatch[0].bar_code)
        this.$set(val, 'weight', this.oneFormBatch[0].weight)
        this.$set(val, 'volume', this.oneFormBatch[0].volume)
        this.$set(val, 'extension_one', this.oneFormBatch[0].extension_one)
        this.$set(val, 'extension_two', this.oneFormBatch[0].extension_two)
      }
    },
    // 添加按钮
    addBtn() {
      this.clearAttr()
      this.isBtn = true
    },
    // 取消
    offAttrName() {
      this.isBtn = false
    },
    clearAttr() {
      this.formDynamic.attrsName = ''
      this.formDynamic.attrsVal = ''
    },
    // 删除规格
    handleRemoveAttr(index) {
      this.formValidate.attr.splice(index, 1)
      this.manyFormValidate.splice(index, 1)
    },
    // 删除属性
    handleClose(item, index) {
      item.splice(index, 1)
    },
    // 添加规则名称
    createAttrName() {
      if (this.formDynamic.attrsName && this.formDynamic.attrsVal) {
        const data = {
          value: this.formDynamic.attrsName,
          detail: [this.formDynamic.attrsVal]
        }
        this.formValidate.attr.push(data)
        var hash = {}
        this.formValidate.attr = this.formValidate.attr.reduce(function(
            item,
            next
          ) {
            /* eslint-disable */
            hash[next.value] ? '' : (hash[next.value] = true && item.push(next))
            return item
          },
          [])
        this.clearAttr()
        this.isBtn = false
      } else {
        this.$message.warning('请添加完整的规格！')
      }
    },
    // 添加属性
    createAttr(num, idx) {
      if (num) {
        this.formValidate.attr[idx].detail.push(num)
        var hash = {}
        this.formValidate.attr[idx].detail = this.formValidate.attr[
          idx
          ].detail.reduce(function(item, next) {
          /* eslint-disable */
          hash[next] ? '' : (hash[next] = true && item.push(next))
          return item
        }, [])
        this.formValidate.attr[idx].inputVisible = false
      } else {
        this.$message.warning('请添加属性')
      }
    },
    // 详情
    getInfo() {
      this.fullscreenLoading = true
      productDetailApi(this.$route.params.id)
        .then(async res => {
          let info = res.data

          this.deduction_set = info.integral_rate == -1 ? -1 : 1
          this.formValidate = {
            image: info.image,
            attrValue: info.attrValue,
            slider_image: info.slider_image,
            store_name: info.store_name,
            store_info: info.store_info,
            keyword: info.keyword,
            brand_id: info.brand_id, // 品牌id
            cate_id: info.cate_id, // 平台分类id
            mer_cate_id: info.mer_cate_id, // 商户分类id
            unit_name: info.unit_name,
            sort: info.sort,
            once_count: info.once_count,
            is_good: info.is_good,
            temp_id: info.temp_id,
            guarantee_template_id: info.guarantee_template_id ? info.guarantee_template_id : '',
            attr: info.attr,
            extension_type: info.extension_type,
            content: info.content,
            spec_type: info.spec_type,
            give_coupon_ids: info.give_coupon_ids,
            give_point_ratio: info.give_point_ratio,
            is_trader: info.is_trader,
            is_gift_bag: info.is_gift_bag,
            couponData: info.coupon,
            video_link: info.video_link ? info.video_link : '',
            integral_rate: info.integral_rate,
            delivery_way: info.delivery_way && info.delivery_way.length ? info.delivery_way.map(String) : this.deliveryType,
            delivery_free: info.delivery_free ? info.delivery_free : 0,
            is_maker_gift: info.is_maker_gift,
            is_red_packet_pay: info.is_red_packet_pay,
            mer_id: info.mer_id,
            mer_labels: info.mer_labels && info.mer_labels.length ? info.mer_labels.map(Number) : [],
            extend_cate_id: info.extend_cate_id ? info.extend_cate_id : 0,
            deduct_gold_coin: info.deduct_gold_coin ? info.deduct_gold_coin : 0,
            give_red_packet: info.give_red_packet ? info.give_red_packet : 0,
            give_bonus_point: info.give_bonus_point ? info.give_bonus_point : 0
          }
          if (info.extend_cate_id) {
            if (this.formValidate.mer_id == '1') {
              this.form.name = this.optionsNews[info.extend_cate_id].name
            } else {
              this.form.name = this.options[info.extend_cate_id].name
            }

            if (info.extend_cate_id != 0) {
              this.showRedBag = true
            }
          } else {
            this.form.name = this.options[0].name
          }

          if (this.formValidate.spec_type === 0) {
            this.OneattrValue = info.attrValue
          } else {
            this.ManyAttrValue = info.attrValue
            this.ManyAttrValue.forEach(val => {
              if (val.detail !== 'undefined' && val.detail !== null) {
                this.attrInfo[
                  Object.values(val.detail)
                    .sort()
                    .join('/')
                  ] = val
              }
            })
          }
          if (this.formValidate.is_good === 1) {
            this.checkboxGroup.push('is_good')
          }
          this.fullscreenLoading = false
        })
        .catch(res => {
          this.fullscreenLoading = false
          this.$message.error(res.message)
        })
    },
    handleRemove(i) {
      this.formValidate.slider_image.splice(i, 1)
    },
    // 点击商品图
    modalPicTap(tit, num, i) {
      const _this = this
      const attr = []
      this.$modalUpload(function(img) {
        if (tit === '1' && !num) {
          _this.formValidate.image = img[0]
          _this.OneattrValue[0].image = img[0]
        }
        if (tit === '2' && !num) {
          img.map(item => {
            attr.push(item.attachment_src)
            _this.formValidate.slider_image.push(item)
            if (_this.formValidate.slider_image.length > 10) {
              _this.formValidate.slider_image.length = 10
            }
          })
        }
        if (tit === '1' && num === 'dan') {
          _this.OneattrValue[0].image = img[0]
        }
        if (tit === '1' && num === 'duo') {
          _this.ManyAttrValue[i].image = img[0]
        }
        if (tit === '1' && num === 'pi') {
          _this.oneFormBatch[0].image = img[0]
        }
      }, tit)
    },
    handleSubmitUp() {
      if (this.currentTab-- < 0) this.currentTab = 0
    },
    handleSubmitNest(name) {
      // var number = parseInt(this.formValidate.give_point_ratio);
      // if (number < 3 ) {
      //   this.$message.error('请输入3-20之间的服务费');
      //   return;
      // }
      // if(number>20){
      //   this.$message.error('请输入3-20之间的服务费');
      //   return;
      // }

      this.$refs[name].validate(valid => {
        if (valid) {
          if (this.currentTab++ > 2) this.currentTab = 0
        } else {
          if (
            !this.formValidate.store_name ||
            !this.formValidate.cate_id ||
            !this.formValidate.unit_name ||
            !this.formValidate.store_info ||
            !this.formValidate.image ||
            !this.formValidate.slider_image
          ) {
            this.$message.warning('请填写完整商品信息！')
          }
        }
      })
    },
    // 提交
    handleSubmit(name) {
      this.$store.dispatch('settings/setEdit', false)
      this.onChangeGroup()
      if (this.formValidate.spec_type === 1) {
        this.formValidate.attrValue = this.ManyAttrValue
      } else {
        this.formValidate.attrValue = this.OneattrValue
        this.formValidate.attr = []
      }
      if (this.formValidate.extend_cate_id === 1 && this.formValidate.spec_type === 0) {
        let attrValue = this.OneattrValue[0]
        this.formValidate.give_bonus_point = parseFloat((attrValue.price - attrValue.cost).toFixed(3))
      }
      console.log(this.formValidate)
      // return
      this.$refs[name].validate(valid => {
        if (valid) {
          this.fullscreenLoading = true
          this.loading = true
          this.$route.params.id && !this.$route.query.type
            ? productUpdateApi(this.$route.params.id, this.formValidate)
              .then(async res => {
                this.fullscreenLoading = false
                this.$message.success(res.message)
                this.$router.push({ path: this.roterPre + '/product/list' })
                this.$refs[name].resetFields()
                this.formValidate.slider_image = []
                this.loading = false
              })
              .catch(res => {
                this.fullscreenLoading = false
                this.loading = false
                this.$message.error(res.message)
              })
            : productCreateApi(this.formValidate)
              .then(async res => {
                this.fullscreenLoading = false
                this.$message.success(res.message)
                this.$router.push({ path: this.roterPre + '/product/list' })
                this.$refs[name].resetFields()
                this.formValidate.slider_image = []
                this.loading = false
              })
              .catch(res => {
                this.fullscreenLoading = false
                this.loading = false
                this.$message.error(res.message)
              })
        } else {
          if (
            !this.formValidate.store_name ||
            !this.formValidate.cate_id ||
            !this.formValidate.unit_name ||
            !this.formValidate.store_info ||
            !this.formValidate.image ||
            !this.formValidate.slider_image
          ) {
            this.$message.warning('请填写完整商品信息！')
          }
        }
      })
    },
    //预览
    handlePreview(name) {
      this.onChangeGroup()
      if (this.formValidate.spec_type === 1) {
        this.formValidate.attrValue = this.ManyAttrValue
      } else {
        this.formValidate.attrValue = this.OneattrValue
        this.formValidate.attr = []
      }
      productPreviewApi(this.formValidate)
        .then(async res => {
          this.previewVisible = true
          this.previewKey = res.data.preview_key
        })
        .catch(res => {
          this.$message.error(res.message)
        })
    },
    // 表单验证
    validate(prop, status, error) {
      if (status === false) {
        this.$message.warning(error)
      }
    },
    // 规格图片验证
    specPicValidate(ManyAttrValue) {
      for (let i = 0; i < ManyAttrValue.length; i++) {
        if (ManyAttrValue[i].image === '' || !ManyAttrValue[i].image) {
          this.$message.warning('请上传商品规格图！')
          this.picValidate = false
          break
        }
      }
    },
    // 移动
    handleDragStart(e, item) {
      this.dragging = item
    },
    handleDragEnd(e, item) {
      this.dragging = null
    },
    handleDragOver(e) {
      e.dataTransfer.dropEffect = 'move'
    },
    handleDragEnter(e, item) {
      e.dataTransfer.effectAllowed = 'move'
      if (item === this.dragging) {
        return
      }
      const newItems = [...this.formValidate.slider_image]
      const src = newItems.indexOf(this.dragging)
      const dst = newItems.indexOf(item)
      newItems.splice(dst, 0, ...newItems.splice(src, 1))
      this.formValidate.slider_image = newItems
    },
    // 添加自定义弹窗
    addCustomDialog(editorId) {
      window.UE.registerUI(
        'test-dialog',
        function(editor, uiName) {
          // 创建 dialog
          let dialog = new window.UE.ui.Dialog({
            iframeUrl: roterPre + '/admin/widget/image?field=dialog',
            editor: editor,
            name: uiName,
            title: '上传图片',
            cssRules: 'width:1200px;height:500px;padding:20px;'
          })
          this.dialog = dialog
          let btn = new window.UE.ui.Button({
            name: 'dialog-button',
            title: '上传图片',
            cssRules: `background-image: url(../../../assets/images/icons.png);background-position: -726px -77px;`,
            onclick: function() {
              // 渲染dialog
              dialog.render()
              dialog.open()
            }
          })
          return btn
        },
        37
      )
      window.UE.registerUI(
        'video-dialog',
        function(editor, uiName) {
          let dialog = new window.UE.ui.Dialog({
            iframeUrl: roterPre + '/admin/widget/video?fodder=video',
            editor: editor,
            name: uiName,
            title: '上传视频',
            cssRules: 'width:600px;height:420px;padding:10px 20px 20px;'
          })
          this.dialog = dialog
          let btn = new window.UE.ui.Button({
            name: 'video-button',
            title: '上传视频',
            cssRules: `background-image: url(../../../assets/images/icons.png);background-position: -320px -20px;`,
            onclick: function() {
              // 渲染dialog
              dialog.render()
              dialog.open()
            }
          })
          return btn
        },
        38
      )
    }
  }
}
</script>
<style scoped lang="scss">
.bg {
  z-index: 100;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
}

.fuwu {
  display: flex;
  flex-direction: row;
}

.goods_detail .goods_detail_wrapper {
  z-index: -10;
}

/deep/ .upLoadPicBox {
  .upLoad {
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -o-box-orient: vertical;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    line-height: 20px;
  }

  span {
    font-size: 10px;
  }
}

.proCoupon {
  /deep/ .el-form-item__content {
    margin-top: 5px;
  }
}

.tabPic {
  width: 40px !important;
  height: 40px !important;

  img {
    width: 100%;
    height: 100%;
  }
}

.noLeft {
  /deep/ .el-form-item__content {
    margin-left: 0 !important;
  }
}

.tabNumWidth {
  /deep/ .el-input-number--medium {
    width: 121px !important;
  }

  /deep/ .el-input-number__increase {
    width: 20px !important;
    font-size: 12px !important;
  }

  /deep/ .el-input-number__decrease {
    width: 20px !important;
    font-size: 12px !important;
  }

  /deep/ .el-input-number--medium .el-input__inner {
    padding-left: 25px !important;
    padding-right: 25px !important;
  }

  /deep/ thead {
    line-height: normal !important;
  }

  /deep/ .el-table .cell {
    line-height: normal !important;
  }
}

.selWidth {
  width: 100%;
}

.selWidthd {
  width: 300px;
}

.button-new-tag {
  height: 28px;
  line-height: 26px;
  padding-top: 0;
  padding-bottom: 0;
}

.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}

.pictrue {
  width: 60px;
  height: 60px;
  border: 1px dotted rgba(0, 0, 0, 0.1);
  margin-right: 10px;
  position: relative;
  cursor: pointer;

  img {
    width: 100%;
    height: 100%;
  }
}

.iview-video-style {
  width: 40%;
  height: 180px;
  border-radius: 10px;
  background-color: #707070;
  margin-top: 10px;
  position: relative;
  overflow: hidden;
}

.iconv {
  color: #fff;
  line-height: 180px;
  display: inherit;
  font-size: 26px;
  position: absolute;
  top: -74px;
  left: 50%;
  margin-left: -25px;
}

.iview-video-style .mark {
  position: absolute;
  width: 100%;
  height: 30px;
  top: 0;
  background-color: rgba(0, 0, 0, 0.5);
  text-align: center;
}

.uploadVideo {
  margin-left: 10px;
}

.perW50 {
  width: 50%;
}

.submission {
  margin-left: 10px;
}

.btndel {
  position: absolute;
  z-index: 1;
  width: 20px !important;
  height: 20px !important;
  left: 46px;
  top: -4px;
}

.labeltop {
  /deep/ .el-form-item__label {
    float: none !important;
    display: inline-block !important;
    margin-left: 120px !important;
    width: auto !important;
  }
}
</style>
